<template>
  <el-dialog title="关联进项发票明细" :visible.sync="dialogVisible" width="1400px" :close-on-click-modal="false"
    :modal-append-to-body="false" v-drag2anywhere>
    <div>
      <el-row>
        <el-col>
          <div class="title">采购明细</div>
          <el-table :data="tableData" border>
            <el-table-column type="index" label="序号" align="center" width="50px"></el-table-column>
            <el-table-column prop="reqcode" label="采购单号" width="120px"></el-table-column>
              <el-table-column prop="seller" label="销售方名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="title" label="产品名称"></el-table-column>
            <el-table-column prop="brand" label="品牌" width="100px" show-overflow-tooltip></el-table-column>
            <el-table-column prop="model" label="规格" width="80px" show-overflow-tooltip></el-table-column>
            <el-table-column prop="count" label="数量" width="80px" align="center"></el-table-column>
            <el-table-column prop="price" label="单价" width="90px" align="center"></el-table-column>
            <el-table-column prop="total" label="总价" width="90px" align="center"></el-table-column>
            <el-table-column prop="yunfei" label="运费" width="110px" align="center"></el-table-column>
            <el-table-column prop="tickettype" label="发票类型" width="120px" align="center">
              <template v-slot="scope">
                {{formData.tickettype}}
              </template>
            </el-table-column>

            <el-table-column prop="buyer" label="购买方名称" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-col>
        <el-col>

          <div style="margin: 20px 0px 0px 0px;">
            <el-form>
              <div style="text-align: right; padding: 2px 2px 5px 0px;display: flex;">
                <div>
                  <div class="title">已关联进项发票明细</div>
                </div>
                <div style="flex:1;"><el-button type="primary" size="mini" icon="el-icon-finished"
                    @click="showBindBuyTicket">添加进项明细</el-button></div>
              </div>

              <div style="height:250px">
                <!--绑定进项明细-->
                <el-table border :data="buyticketlist" height="100%" empty-text="未绑定任何进项发票明细!"
                  style="overflow-y: auto;">
                  <el-table-column label="序号" type="index" width="50px" align="center"></el-table-column>
                  <el-table-column label="开票日期" prop="date" width="140px"></el-table-column>
                  <el-table-column label="销售单位名称" prop="seller" width="150px" show-overflow-tooltip></el-table-column>
                  <el-table-column label="税收项目名称" align="left" width="180px" prop="taxname" show-overflow-tooltip>
                    <template v-slot="scope">
                      *{{scope.row.taxname}}*{{scope.row.title}}
                    </template>
                  </el-table-column>
                   <el-table-column label="规格型号" prop="model" width="100px" show-overflow-tooltip></el-table-column>
                  <el-table-column label="单位" prop="unit" width="60px" align="center"
                    show-overflow-tooltip></el-table-column>
                  <el-table-column label="金额" prop="amount" width="95px" align="center"></el-table-column>
                  <el-table-column label="进项票号" prop="buyticketnum" align="center" width="160px"></el-table-column>
                  <el-table-column label="发票类型" prop="type" width="100px" align="center" show-overflow-tooltip>
                    <template v-slot="scope">
                      {{scope.row.type}}({{scope.row.rate*100}}%)
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" prop="dmemo"></el-table-column>
                  <el-table-column label="所属账套" prop="buyer" show-overflow-tooltip></el-table-column>
                  <el-table-column label="操作" align="center" width="50px" fixed="right">
                    <template v-slot="scope">
                      <el-button-group>
                        <el-button type="danger" icon="el-icon-delete" circle size="mini"
                          @click="handleDelete(scope.$index,scope.row)"></el-button>
                      </el-button-group>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div style="text-align: right;padding-right: 10px;line-height: 35px;height: 35px">
                <span>已绑金额:{{bindsum.toFixed(4)}} </span>
                <span style="margin-left: 10px;color:#FF0000">未绑金额:{{(unbindsum).toFixed(4)}}</span>
              </div>

              <!--底部功能-->
              <div>
                <div class="title">进项状态</div>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="进项状态">
                      <el-select v-model="formData.buyticketstatus" placeholder="请选择状态">
                        <el-option label="不完整" value="0"></el-option>
                        <el-option label="已完整" value="1"></el-option>
                      </el-select>
                      <div style="padding-top: 10px;">
                        <div style="margin-left: 5px;">不完整: 表示当前采购明细缺少进项票。</div>
                        <div style="margin-left: 5px;">完  整: 表示此采购明细不缺进项票。</div>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item label="进项状态备注" label-width="100px">
                      <el-input type="textarea" v-model="formData.buyticketmemo" :rows="5" placeholder="进项票状态备注"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-form>
          </div>
        </el-col>
      </el-row>

      <BindBuyTicketUI v-if="showBindBuyTicketVisible" ref="bindBuyTicketUI"
        @completeHandler="handleBindTicketCallback"></BindBuyTicketUI>
    </div>
    <div slot="footer">
      <el-button size="medium">取消</el-button>
      <el-button type="primary" size="medium" @click="handleSave">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import BindBuyTicketUI from './buyticketfilter.vue'
  export default {
    components: {
      BindBuyTicketUI
    },
    data() {
      return {
        index: -1,
        formData: {
          did: '',
          reqcode: '',
          buyticketstatus: 0,
          buyticketmemo:''
        },
        bindsum: 0,
        unbindsum: 0,
        buyticketlist: [],
        tableData: [],
        dialogVisible: false,
        showBindBuyTicketVisible: false,
      }
    },
    methods: {
      initData(index, data) {
        this.index = -1;
        this.index = index;
        this.formData = data;
        this.tableData = [data];
        this.unbindsum = data.unbindsum;
        this.loadDetailList();
      },
      calculateBindRmb() {
        this.bindsum = 0;
        this.buyticketlist.map(item => {
          this.bindsum += parseFloat(item.amount);
        })
        this.unbindsum = this.formData.total - this.bindsum;
      },
      loadDetailList() {
        this.axios.post("api/admin/buydetail/get_buyticket_by_id", {
          id: this.formData.did
        }).then(res => {
          if (res.status == 200 && res.data.code == 1) {
            this.buyticketlist = res.data.list;
            this.bindsum = parseFloat(res.data.bindsum);
            this.unbindsum = this.formData.total - this.bindsum;
          }
        })
      },
      handleDelete(index, row) {
        this.buyticketlist.splice(index, 1);
        this.calculateBindRmb();
       /* this.$confirm("确定要删除此项吗?", "提示").then(() => {

        })*/

      },
      showBindBuyTicket() {
        this.showBindBuyTicketVisible = true;
        this.$nextTick(() => {
          this.$refs.bindBuyTicketUI.dialogVisible = true;
          this.$refs.bindBuyTicketUI.initData(this.formData.seller,this.formData.buyer);
        })
      },
      handleBindTicketCallback(list) {
        //处理数据
        for (var i = 0; i < list.length; i++) {
            this.buyticketlist.push({
            id: -1,
            buydid: this.formData.id,
            buyticketdid:list[i].id,
            buyticketnum: list[i].num,
            taxname: list[i].taxname,
            seller:list[i].seller,
            buyer:list[i].buyer,
            date:list[i].date,
            title: list[i].title,
            model: list[i].model,
            unit: list[i].unit,
            count: list[i].count,
            type: list[i].type,
            rate: list[i].rate,
            amount: list[i].readysum,
            dmemo:list[i].dmemo
          });
        }
        this.calculateBindRmb();
      },
      finalSave(){
          console.log(this.formData);
          console.log(this.buyticketlist);
           //检查是否都填写完成
          const params = {
            buyid:this.formData.id,
            buydid: this.formData.did,
            bindsum: this.bindsum,
            unbindsum: this.unbindsum,
            reqcode: this.formData.reqcode,
            status: this.formData.buyticketstatus,
            memo:this.formData.buyticketmemo,
            ticketlist: this.buyticketlist
          }
          this.formData.bindsum = this.bindsum;
          this.formData.unbindsum = this.unbindsum;

          this.axios.post("api/admin/buydetail/update_buyticketbind", params).then(res => {
            if (res.status == 200 && res.data.code == 1) {
              console.log("保存成功");
              this.$message.success({
                message: res.data.msg,
                duration: 1500,
                showClosed: true
              });
              this.dialogVisible = false;
              this.$emit("complete", this.index, params);
            }
          });
      },
      handleSave() {

        //检测当前状态
        if(this.unbindsum==0 && this.formData.buyticketstatus==0){
          this.$confirm("当前进项票已完整，但进项状态为【不完整】,是否继续提交?","信息确认",{type:'warning'}).then(()=>{
              this.finalSave();
          }).catch((err)=>{
             return;
          })
        }else if(this.unbindsum>0 && this.formData.buyticketstatus==1){
          this.$confirm("当前采购明细缺少进项，但进项状态为【完整】,是否继续提交?","信息确认",{type:'warning'}).then(()=>{
             this.finalSave();
          }).catch((err)=>{
             return;
          })
        }else{
          this.finalSave();
        }
      }
    }
  }
</script>

<style>
</style>
